@import "fx-font.css";

.root {
    -fx-background-color: #f5f5f5;
}


/*------------左上角顶部软件Logo------------*/
#nav {

}

/*主题默认*/
#nav-start #mark {
    -fx-border-style: solid; /* 边框样式 */
    -fx-border-width: 0 1px 1px 0;; /* 边框宽度 */
    -fx-border-color: #2a83fe; /* 边框颜色 */
}

#nav-start #nav-logo Region {
    -fx-background-color: #2196f3;
    -fx-shape: "M512 0C228.266667 0 0 228.266667 0 512s228.266667 512 512 512 512-228.266667 512-512S795.733333 0 512 0zM256 305.066667c0-27.733333 21.333333-49.066667 49.066667-49.066667h128c12.8 0 21.333333 8.533333 21.333333 21.333333s-8.533333 21.333333-21.333333 21.333334h-128c-4.266667 0-6.4 2.133333-6.4 6.4v128c0 12.8-8.533333 21.333333-21.333334 21.333333s-21.333333-8.533333-21.333333-21.333333v-128zM433.066667 768h-128C277.333333 768 256 746.666667 256 718.933333v-128c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333334 21.333333v128c0 4.266667 2.133333 6.4 6.4 6.4h128c12.8 0 21.333333 8.533333 21.333333 21.333334s-8.533333 21.333333-21.333333 21.333333z m-136.533334-234.666667c-12.8 0-21.333333-8.533333-21.333333-21.333333s8.533333-21.333333 21.333333-21.333333h420.266667c12.8 0 21.333333 8.533333 21.333333 21.333333s-8.533333 21.333333-21.333333 21.333333H296.533333zM768 718.933333c0 27.733333-21.333333 49.066667-49.066667 49.066667h-128c-12.8 0-21.333333-8.533333-21.333333-21.333333s8.533333-21.333333 21.333333-21.333334h128c4.266667 0 6.4-2.133333 6.4-6.4v-128c0-12.8 8.533333-21.333333 21.333334-21.333333s21.333333 8.533333 21.333333 21.333333v128z m0-285.866666c0 12.8-8.533333 21.333333-21.333333 21.333333s-21.333333-8.533333-21.333334-21.333333v-128c0-4.266667-2.133333-6.4-6.4-6.4h-128c-12.8 0-21.333333-8.533333-21.333333-21.333334s8.533333-21.333333 21.333333-21.333333h128c27.733333 0 49.066667 21.333333 49.066667 49.066667v128z";
}

#nav-start #nav-text {
    -fx-font-size: 20px;
    -fx-font-family: "华文楷体", "楷体", "Microsoft YaHei", "SimSun", serif;
}

/*主题蓝色*/
#nav-start.theme-blue {
    -fx-background-color: #2196f3;
}

#nav-start.theme-blue #nav-logo Region {
    -fx-background-color: #ffffff;
}

#nav-start.theme-blue #nav-text {
    -fx-fill: #ffffff;
}


/*------------左侧菜单实现------------*/
.sidebar-title{
    -fx-fill: #a0a6b1;
}

/*串口设置*/
#plc-port-selector{
    /*设置背景颜色蓝色，字体白色，参考 elementUI 组件*/

}

#plc-connect-btn{
    /*设置跟plc-port-selector相同的主题*/

}

/* 设置连接/断开 ToggleButton 的基本样式 */
#plc-connect-btn {
    -fx-background-color: #f3f3f3;
    -fx-border-color: #2196f3;
    -fx-border-radius: 20px;
    -fx-padding: 5px;
    -fx-pref-width: 60px;
    -fx-pref-height: 30px;
    -fx-background-radius: 20px;
    -fx-transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 非选中（断开）状态的按钮样式 */
#plc-connect-btn:pressed {
    -fx-background-color: #f0f0f0;
}

/* 连接状态的按钮样式（选中状态） */
#plc-connect-btn:selected {
    -fx-background-color: #2196f3; /* 连接状态的背景颜色 */
    -fx-border-color: #2196f3;    /* 连接状态的边框颜色 */
}

/* 内部的圆形滑块 */
#plc-connect-btn .thumb {
    -fx-background-color: transparent;
    -fx-background-radius: 50%;
    -fx-pref-width: 20px;
    -fx-pref-height: 20px;
    -fx-transition: translateX 0.3s ease;
}

/* 当按钮处于连接状态时，圆形滑块移动到右侧 */
#plc-connect-btn:selected .thumb {
    -fx-translate-x: 30px;
}

/* 断开状态时，滑块保持在左侧 */
#plc-connect-btn .thumb {
    -fx-translate-x: 0;
}

/* 设置按钮标签文本样式 */
#plc-connect-btn .text {
    -fx-font-size: 12px;
    -fx-fill: #2196f3; /* 默认文本颜色为主色调 */
    -fx-font-weight: bold;
    -fx-alignment: center;
}

/* 连接状态时，文本颜色变为白色 */
#plc-connect-btn:selected .text {
    -fx-fill: white; /* 连接状态时文本颜色为白色 */
}

/* 鼠标悬停时的效果 */
#plc-connect-btn:hover {
    -fx-border-color: #1e88e5;
}

/* 断开状态的样式（文字颜色变化） */
#plc-connect-btn:pressed .text {
    -fx-fill: #999;
}


/*菜单*/
#menu-list {
    -fx-border-width: 2px 0 0 0; /* 设置仅上边框宽度为2px */
    -fx-border-color: #e4e8ec;   /* 设置边框颜色 */
    -fx-border-style: solid;     /* 设置边框样式为实线 */
}

#menu-icon-scan Region {
    -fx-shape: "M199.123105 455.092919 0.021487 455.092919l0 113.77323 199.101617 0L199.123105 455.092919zM0.021487 1023.958044l398.206304 0L398.227792 625.75174 0.021487 625.75174 0.021487 1023.958044zM113.794717 739.52497l170.659845 0 0 170.658821L113.794717 910.183791 113.794717 739.52497zM398.227792 0 0.021487 0l0 398.205281 398.206304 0L398.227792 0zM284.454562 284.434098 113.794717 284.434098 113.794717 113.77323l170.659845 0L284.454562 284.434098zM739.545434 739.52497 853.318664 739.52497 853.318664 625.75174 625.772204 625.75174l0 227.54646 113.77323 0L739.545434 739.52497zM824.876891 568.866149l199.101617 0L1023.978509 455.092919 824.876891 455.092919 824.876891 568.866149zM910.205279 910.184815 625.772204 910.184815l0 113.77323 398.206304 0L1023.978509 625.75174 910.205279 625.75174 910.205279 910.184815zM625.772204 0l0 398.205281 398.206304 0L1023.978509 0 625.772204 0zM910.205279 284.434098 739.545434 284.434098 739.545434 113.77323l170.659845 0L910.205279 284.434098zM455.11236 455.092919 312.896334 455.092919l0 113.77323 142.215002 0 0 170.658821 113.77323 0L568.884566 284.434098 455.11236 284.434098 455.11236 455.092919zM455.11236 170.660868l113.77323 0L568.88559 0 455.11236 0 455.11236 170.660868zM455.11236 1023.958044l113.77323 0L568.88559 853.2982 455.11236 853.2982 455.11236 1023.958044z";
    -fx-scale-x: 0.8;
    -fx-scale-y: 0.8;
}

#menu-icon-query Region {
    /*-fx-shape: "M64.44 512c2.03-148.35 27.79-271.18 103.12-344.44C240.82 92.24 363.65 66.47 512 64.44c148.35 2.03 271.17 27.79 344.43 103.12 75.33 73.26 101.1 196.09 103.13 344.44-2.03 148.35-27.8 271.17-103.12 344.43C783.17 931.76 660.35 957.52 512 959.56c-148.35-2.03-271.17-27.79-344.43-103.12C92.24 783.18 66.47 660.35 64.44 512zM475.67 276.7c-105 0-190.12 85.12-190.12 190.12s85.12 190.12 190.12 190.12 190.12-85.12 190.12-190.12S580.67 276.7 475.67 276.7z m129.7 164.27c-7.42-0.24-13.34-7.39-14.77-15.42-6.46-37.56-36.09-67.2-73.65-73.65-8.03-1.44-15.19-7.36-15.42-14.77-0.26-7.38 9.04-13.67 20.02-11.76 48.75 8.38 87.22 46.85 95.59 95.59 1.9 10.97-4.39 20.27-11.77 20.01zM729.49 695.12l-88.33-88.32c-13.23 15.63-28.6 29.37-45.71 40.74l90.81 90.81c5.97 5.97 13.79 8.95 21.61 8.95s15.64-2.98 21.61-8.95c11.95-11.95 11.95-31.3 0.01-43.23z";*/
    -fx-shape: "M735.5 959h-447C165.3 959 65 858.7 65 735.5v-447C65 165.3 165.3 65 288.5 65h447C858.7 65 959 165.3 959 288.5v447C959 858.7 858.7 959 735.5 959z m-447-812.7c-78.4 0-142.2 63.8-142.2 142.2v447c0 78.4 63.8 142.2 142.2 142.2h447c78.4 0 142.2-63.8 142.2-142.2v-447c0-78.4-63.8-142.2-142.2-142.2h-447zM763.1 703.8l-40.9-41.2c11.7-18.8 18.5-41 18.5-64.8 0-67.9-55.2-122.9-123.3-122.9S494 530 494 597.8c0 67.9 55.2 122.9 123.3 122.9 25.7 0 49.5-7.8 69.2-21.2l40.2 40.5c4.7 4.7 11.1 7.5 18.2 7.5 14.2 0 25.7-11.4 25.7-25.6 0-7-2.9-13.4-7.5-18.1z m-145.8-21c-47.1 0-85.2-38-85.2-84.9 0-46.9 38.1-84.9 85.2-84.9s85.2 38 85.2 84.9c0 46.8-38.1 84.9-85.2 84.9zM494 456.6c122.8 0 208.4-31 208.4-69.2v-41.6c0-38.3-85.6-69.2-208.4-69.2s-194.5 31-194.5 69.2v41.6c0 38.2 71.8 69.2 194.5 69.2z m-29.6 173.2c-84.3-3.1-129.2-29.9-155-55.5-6.6 6.5-9.8 13.5-9.8 20.8v55.4c0 38.3 71.8 69.2 194.5 69.2 12.3 0 24.2-0.3 36-1-31.6-22.6-58.5-49.3-65.7-88.9z m1.9-35.4c0-36.6 13.2-70.2 34.9-96.4h-7.9c-99.5 0-155.6-20.4-184-48.5-6.6 6.5-9.8 13.5-9.8 20.8v55.4c0 35.3 61.1 64.4 166.8 68.7z";
    -fx-scale-x: 0.9;
    -fx-scale-y: 0.9;
}

/*菜单未选中默认样式*/
.menu-item {
    -fx-background-radius: 12px; /* 背景圆角 */
    /*-fx-background-color: #dbdbe7; !* 背景颜色 *!*/
    /*-fx-border-style: solid; !* 边框样式 *!*/
    /*-fx-border-width: 1px; !* 边框宽度 *!*/
    /*-fx-border-color: black; !* 边框颜色 *!*/
    /*-fx-border-radius: 12px; !* 边框圆角，与背景圆角一致 *!*/

    /*设置内边距 padding: 上 右 下 左*/
    -fx-padding: 8px 20px 8px 10px;
}

.menu-item:hover {
    -fx-cursor: hand; /* 鼠标悬浮时显示小手 */
    -fx-background-color: #e4e8ec; /* 鼠标悬浮时的背景色 */
}

.menu-item .menu-icon Region {
    -fx-background-color: black;
}

.menu-item .menu-text {
    -fx-fill: black;
    -fx-font-size: 15px;
}

/*菜单选中样式*/
.menu-item.selected {
    -fx-background-color: #2196f3;
}

.menu-item.selected .menu-icon Region {
    -fx-background-color: white;
}

.menu-item.selected .menu-text {
    -fx-fill: white;
    -fx-font-size: 16px;
}


/*------------底部状态栏------------*/
#status-bar #log-icon Region {
    -fx-background-color: #2196f3;
    -fx-shape: "M64 960V192h192V64h128v128h256V64h128v128h192v768H64z m768-640H192v512h640V320z m-128 192H320v-64h384v64z m-128 192h-256v-64h256v64z"
}


#status-bar #log-label {

}

